<template>
	<div>
		<div class="title">
			<text class="title-text large-size">{{detailData.communityName}} <text class="title-text2">{{detailData.apprStatusName}}</text></text>
		</div>
		<div class="panel">
			<text class="text1"><text class="text2 small-size">小区负责人</text><text class="text3 small-size">{{detailData.namager}}</text></text>
			<text class="text1"><text class="text2 small-size">联系电话</text>
				<a :href="detailData.mobile1" class="text3 small-size">
					<text class="text3 phonenum">{{detailData .mobile}}<image class="phone-image"  v-bind:src="phoneImg"></image></text>
				</a>
			</text>
			<text class="text1"><text class="text2 small-size">所属物业</text><a href='#' class="text3"><text class="
         small-size text-tenant" @click='toTenant(detailData.tenantId)'>{{detailData.tenantName}}</text></a></text>
			<text class="text1"><text class="text2 small-size">物业服务热线</text>
				<a :href="detailData.serviceHotline1" class="text3 small-size">
					<text class="text3 phonenum">{{detailData .serviceHotline}}<image class="phone-image" v-bind:src="phoneImg"></image></text>
				</a>
			</text>
			<text class="text-address-wrap"><text class="text-address-title small-size">物业小区主地址</text><text class="text-address small-size">{{detailData.communityAddress}}</text></text>
			<text class="text1"><text class="text2 small-size">提交时间</text><text class="text3 small-size">{{detailData.gmtCreatedStr}}</text></text>
		</div>
		<div class="images">
			<div class="cell images-cell" v-for="(item, i) in detailData.imgUrlList">
				<div class="images-item-wrap">
					<image class="images-item" @click="clickImg(i)" v-bind:src="item.attchUrlSmall"></image>
				</div>
			</div>
		</div>
		<div class="process">
			<div class="cell" v-for="item in memoList">
				<div class="panel process-panel">
					<div v-if="item.headImage.length > 0" class="image-wrap">
						<image class="detail-image" v-bind:src="item.headImage[0].attchUrlSmall"></image>
					</div>
					<div class="detail-info">
						<text class="detail-name small-size" >{{item.operatorName}}</text>
						<text v-if="item.statusName=='通过'" class="detail-result pass small-size">{{item.statusName}}</text>
						<text v-else class="detail-result nopass small-size">{{item.statusName}}</text>
						<text class="detail-time small-size">{{item.apprTimeStr}}</text>
					</div>
				</div>
			</div>
		</div>
		<div v-if="visible" class="weex-mask"></div>
		<div  v-if="visible" class="weex-dialog">
			<div class="weex-dialog-content">
				<div class="weex-dialog--row">
					<textarea class="weex-dialog-textarea"  @change="changeMemo" placeholder="请输入下线原因"></textarea>
				</div>
				<div class="weex-dialog--row">
					<text class="weex-dialog--text">短信通知</text>
					<switch @change="changeMessage" checked="messageType"></switch>
				</div>
			</div>

			<div class="weex-dialog-foot">
				<a class="weex-dialog-button"><text class="weex-dialog-button-confirm" @click="saveDialog">保存</text></a>
				<a class="weex-dialog-button"><text class="weex-dialog-button-cancel" @click="cancelDialog">取消</text></a>
			</div>

		</div>
	</div>
</template>
<script>
	var dingtalk = require('weex-dingtalk');
	const dd = dingtalk.apis;
	const modal = weex.requireModule('modal');

	const getDetail = '/community/ajax/communitydetail';
	const saveInfo = '/community/ajax/violationoffline';

	export default {
		data () {
			return {
				showLoading: 'hide',
				detailData: {},
				memoList: [],
				phoneImg: '',
				visible: false,
				messageType: true,
				memo: ''
			}
		},
		mounted: function(){
			dingtalk.ready(function(){
				// 设置导航
				const dd = dingtalk.apis;
				dd.biz.navigation.setTitle({
					title: '小区详情'
				});

			});
			this.phoneImg =_staticresources + '/images/dial-image.png';
			this.getDetailList();
		},
		methods: {
			clickImg(index) {
				// 设置图片预览
				const dd = dingtalk.apis;
				dd.biz.util.previewImage({
					urls: [this.detailData.imgUrlList[index].attchUrlSmall],//图片地址列表
					current: this.detailData.imgUrlList[index].attchUrl,//当前显示的图片链接
					onSuccess : function(result) {
						/**/
					},
					onFail : function(err) {
					}
				});
			},
			getDetailList: function(){
				var self = this;
				getAjax(getDetail,{communityId: communityId},true,function (data) {
					if(data.messageType == 'SUCCESS') {
						var result= data.valueObj;
						self.detailData = result;
						self.detailData.mobile1 = 'tel:' + self.detailData.mobile;
						self.detailData.serviceHotline1 = 'tel:' + self.detailData.serviceHotline;
						// communityStatusName
						if(self.detailData.apprStatusName){
							self.detailData.apprStatusName = '(' + self.detailData.apprStatusName + ')';
						}else {
							self.detailData.apprStatusName = '';
						}
						self.memoList = data.valueObj.memoList;
						if(result.apprStatus!='99'){
						//	debugger
							const dd = dingtalk.apis;
							dd.biz.navigation.setRight({
								control: true,
								show: true,
								text: '违规下线'
							});
							dingtalk.on('navRightButton',function(){
//								dd.biz.util.openLink({
//									url: 'https://github.com/icepy/weex-dingtalk'
//								})
								self.visible = true;
							});
						}else {
							const dd = dingtalk.apis;
							dd.biz.navigation.setRight({
								control: false,
								show: false,
								text: ''
							});
						}
					}
				});
			},
			toTenant: function(tenantId){
				location.href = _webpath + '/tenantmanager/todetail' + '?tenantId=' + tenantId;
			},
			changeMessage(e){
				this.messageType = e.value;
			//	console.log(this.messageType);
			},
			changeMemo(e){
				this.memo = e.value;
			},
			saveDialog(){
				var param = {
					communityId: communityId,
					reason: this.memo
				};
				if (this.messageType) {
					param.sendmsgFlag = '01'
				}
				else {
					param.sendmsgFlag = '02'
				}
				var self = this;
				formAjax(saveInfo,param,true,function (data) {
					if(data.messageType == 'SUCCESS') {
						self.visible = false;
						self.getDetailList();
					}
				});
			},
			cancelDialog(){
				this.visible = false
			},
		}
	}
</script>
<style scoped>
	.weex-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		display: block;
		/* opacity: 0; */
		z-index: 100;
		-webkit-transition: opacity .2s;
		transition: opacity .2s;
		background-color: rgba(55,55,55,.6);
	}
	.weex-dialog {
		position: absolute;
		left: 10%;
		right: 10%;
		width: 80%;
	//	height: 120px;
		top: 50%;
		margin-top: -60px;
		padding-top: 15px;
		background: #fff;
		border-radius: 10px;
		z-index: 901;
		text-align: center;
		font-size: 14px;
		line-height: 1.5;
	}
	.weex-dialog-title {
		padding: 10px 20px;
		margin: 0;
		font-size: 28px;
		color: rgba(0,0,0,.85);
	}
	.weex-dialog-content {
		padding: 20px;
	}
	.weex-dialog--row {
		flex-direction: row;
		justify-content: flex-start;
		padding: 20px;
	}
	.weex-dialog--text {
		color: #666;
		font-size: 28px;
		padding: 10px 10px 0 0;
	}
	.weex-dialog-textarea {
		height: 200px;
		width: 100%;
		padding: 10px;
		font-size: 28px;
		color: #666666;
		border-width: 2px;
		border-style: solid;
		border-color: rgb(217, 217, 217);
		appearance:none;
		-moz-appearance:none; /* Firefox */
		-webkit-appearance:none; /* Safari 和 Chrome */
	}
	.weex-dialog-button {
		position: relative;
		display: inline-block;
	//	width:200px;
		margin: 0 10px;
	}
	.weex-dialog-button-confirm {
		display: inline-block;
		border-radius: 8px;
		padding: 8px 50px;
		font-size: 28px;
		color: #fff;
		text-align: center;
		/*border-width: 1px;*/
		/*border-style: solid;*/
		/*border-color: #108ee9;*/
		background-color: #1ab2e9;
		outline: none;
	}
	.weex-dialog-button-cancel{
		display: inline-block;
		border-radius: 8px;
		padding: 8px 50px;
		font-size: 28px;
		text-align: center;
		color: rgba(0,0,0,.65);
		border-width: 1px;
		border-style: solid;
		background-color: #fff;
		border-color: #d9d9d9;
	}
	.weex-dialog-foot {
		text-align: center;
		flex-direction: row;
		justify-content: center;
		padding-bottom: 40px;
	}
	.panel {
		width: 100%;
	//padding: 0.25rem 0;
		flex-direction: column;
	}
	.title {
		width: 100%;
		padding: 20px 30px 10px;
		flex-direction: column;
		border-bottom-width: 1px;
		border-bottom-style: solid;
		border-bottom-color: #f4f4f4;
	}
	.title-text {
		display: inline-block;
	}
	.title-text2 {
		display: inline-block;
		position: absolute;
		bottom: 4px;
		padding-left: 5px;
		font-size: 24px;
	}
	.gotocommunity {
		display: inline-block;
		padding-top: 15px;
		padding-left: 30px;
		color: rgb(16, 142, 233);
	}
	.text1 {
		width: 100%;
		display: inline-block;
		padding: 15px 30px;
		border-bottom-width: 1px;
		border-bottom-style: solid;
		border-bottom-color: #f4f4f4;
	}
	.text2 {
		display: inline-block;
		color: #666;
	}
	.text3 {
		display: inline-block;
		float: right;
	}
	.text-address-wrap {
		width: 100%;
		position: relative;
		display: inline-block;
		padding: 15px 30px 15px 230px;
		border-bottom-width: 1px;
		border-bottom-style: solid;
		border-bottom-color: #f4f4f4;
	}
	.text-address-title{
		display: inline-block;
		position: absolute;
		left: 30px;
		top: 16px;
		color: #666;
	}
	.text-address{
		display: inline-block;
		word-wrap: break-word;
		padding-left: 30px;
	}
	.text-address
	.text-tenant {
		color: #38adff;
	}
	.phonenum {
		color: #38adff;
		padding-right: 40px;
	}
	.phone-image {
		display: inline-block;
		position: absolute;
		top: 6px;
		right: 0;
		width: 30px;
		height: 30px;
	}
	.process-panel {
		padding: 10px 30px 15px;
		border-bottom-width: 1px;
		border-bottom-style: solid;
		border-bottom-color: #f4f4f4;
	}
	.image-wrap {
		display: inline-block;
		position: absolute;
		top: 19px;
	}
	.detail-image {
		border-radius: 30px;
		width: 60px;
		height: 60px;
	}
	.detail-info {
		position: relative;
		top: 0;
		padding-left: 85px;
	}
	.detail-name {
		padding-bottom: 5px;
	}
	.detail-result {
	//font-size: 0.5rem;
	}
	.detail-time {
		position: absolute;
		top: 0;
		right: 15px;
		color: #999;
	}
	.images {
		flex-direction: row;
		flex-wrap: wrap;
		padding: 15px 30px;
	}
	.images-cell {
		padding: 20px;
	}
	.images-item {
		width: 160px;
		height: 160px;
		cursor: none !important;
	}
	.pass {
		color: #108EE9;
	}
	.nopass {
		color: #F04134;
	}
</style>